<template>
  <div class="palette-demo palette-demo-tip cleafix">
    <div class="palette-demo-block">
      <div class="md-tip has-close is-top">
        <div class="md-tip-content">
          <div class="content-text">不错哟</div>
          <i class="md-icon icon-font md-icon-close close md"></i>
        </div>
        <div class="md-tip-bg"></div>
      </div>
    </div>
    <div class="palette-demo-block">
      <div class="md-tip has-close is-left">
        <div class="md-tip-content">
          <div class="content-text">不错哟</div>
          <i class="md-icon icon-font md-icon-close close md"></i>
        </div>
        <div class="md-tip-bg"></div>
      </div>
      <!-- <div class="md-tip is-left">
        Tip Text
        <md-icon name="cross" size="md"></md-icon>
      </div> -->
    </div>
    <div class="palette-demo-block">
      <div class="md-tip has-close is-right">
        <div class="md-tip-content">
          <div class="content-text">不错哟</div>
          <i class="md-icon icon-font md-icon-close close md"></i>
        </div>
        <div class="md-tip-bg"></div>
      </div>
    </div>
    <div class="palette-demo-block">
      <div class="md-tip has-close is-bottom">
        <div class="md-tip-content">
          <div class="content-text">不错哟</div>
          <i class="md-icon icon-font md-icon-close close md"></i>
        </div>
        <div class="md-tip-bg"></div>
      </div>
    </div>
  </div>
</template>

<style lang="stylus">
.palette-demo-tip
  .palette-demo-block
    display flex
    justify-content center
   .md-tip
    position relative
    margin-top 50px
</style>
